---
title: Install Astro with the Automatic CLI
description: 'How to install Astro with NPM, PNPM, or Yarn via the create-astro CLI tool.'
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'


Ready to install Astro? Follow this guide to using the `create astro` CLI to get started.

:::note[Prefer to install Astro manually?]
Read our [step-by-step manual installation guide](/en/install/manual/) instead.
:::
#### Prerequisites

- **Node.js** - `v18.14.1` or higher.
- **Text editor** - We recommend [VS Code](https://code.visualstudio.com/) with our [Official Astro extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Terminal** - Astro is accessed through its command-line interface (CLI).

#### Installation

`create astro` is the fastest way to start a new Astro project from scratch. It will walk you through every step of setting up your new Astro project. It allows you to choose from a few different official starter templates or you can [use any existing project on GitHub with the `--template` argument](#starter-templates).

:::tip[Online previews]
Prefer to try Astro in your browser? Visit [astro.new](https://astro.new/) to browse our starter templates and spin up a new Astro project without ever leaving your browser.
:::

## 1. Run the Setup Wizard

Run the following command in your terminal to start our handy install wizard:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # create a new project with npm
  npm create astro@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # create a new project with pnpm
  pnpm create astro@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # create a new project with yarn
  yarn create astro
  ```
  </Fragment>
</PackageManagerTabs>

You can run `create astro` anywhere on your machine, so there's no need to create a new empty directory for your project before you begin. If you don't have an empty directory yet for your new project, the wizard will help create one for you automatically.

If all goes well, you should see a "Liftoff confirmed. Explore your project!" message followed by some recommended next steps. `cd` into your new project directory to begin using Astro.

If you skipped the `npm install` step during the CLI wizard, then be sure to install your dependencies before continuing.

## 2. Start Astro ✨

Astro comes with a built-in development server that has everything you need for project development. The `astro dev` command will start the local development server so that you can see your new website in action for the very first time.

Every starter template comes with a pre-configured script that will run `astro dev` for you. Use your favorite package manager to run this command and start the Astro development server.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>


If all goes well, Astro should now be serving your project on [http://localhost:4321/](http://localhost:4321/)!

Astro will listen for live file changes in your `src/` directory, so you will not need to restart the server as you make changes during development.

When viewing your site in the browser, you'll have access to the [Astro dev toolbar](/en/guides/dev-toolbar/). As you build, it will help you inspect your [islands](/en/concepts/islands/), spot accessibility issues, and more.

If you aren't able to open your project in the browser, go back to the terminal where you ran the `dev` command and look to see if an error occurred, or if your project is being served at a different URL than the one linked to above.

## Starter Templates

You can also start a new astro project based on an [official example](https://github.com/withastro/astro/tree/main/examples) or the `main` branch of any GitHub repository by passing a `--template` argument to the `create astro` command.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # create a new project with an official example
  npm create astro@latest -- --template <example-name>

  # create a new project based on a GitHub repository’s main branch
  npm create astro@latest -- --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # create a new project with an official example
  pnpm create astro@latest --template <example-name>
  
  # create a new project based on a GitHub repository’s main branch
  pnpm create astro@latest --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # create a new project with an official example
  yarn create astro --template <example-name>
  
  # create a new project based on a GitHub repository’s main branch
  yarn create astro --template <github-username>/<github-repo>
  ```
  </Fragment>
</PackageManagerTabs>

By default, this command will use the template repository’s `main` branch. To use a different branch name, pass it as part of the `--template` argument: `<github-username>/<github-repo>#<branch>`.

Explore our [themes and starters showcase](https://astro.build/themes/) where you can browse themes for blogs, portfolios, documentation, landing pages, and more! Or, [search on GitHub](https://github.com/search?o=desc&q=astro+starter&s=stars&type=Repositories) for even more starter projects.

## Next Steps

Success! You are now ready to start building with Astro! 🥳

Here are a few topics that we recommend exploring next. You can read them in any order. You can even leave our documentation for a bit and go play in your new Astro project codebase, coming back here whenever you run into trouble or have a question.

import { CardGrid, LinkCard } from '@astrojs/starlight/components';

<CardGrid>
  <LinkCard
    title="Understand your codebase"
    description="Learn more about Astro’s file structure in our Project Structure guide."
    href="/en/basics/project-structure/"
  />
  <LinkCard
    title="Add a framework"
    description="Extend Astro with support for React, Svelte, Tailwind and more in our Integrations guide."
    href="/en/guides/integrations-guide/"
  />
  <LinkCard
    title="Deploy your site"
    description="Learn how to build and deploy an Astro project to the web in our Deployment guide."
    href="/en/guides/deploy/"
  />
</CardGrid>
